<template>
	<label class="ui-textbox" :class="['ui-textbox--' + display]">
		<view class="ui-textbox__prefix" v-if="$slots.prefix">
			<slot name="prefix"></slot>
		</view>
		<view class="ui-textbox__input">
			<input
				v-if="type === 'text'"
				v-model="innerValue"
				type="text"
				confirm-type="done"
				class="ui-textbox__control"
				:placeholder="placeholder"
				:confirm-hold="false"
				@blur="handleBlur"
				@confirm="handleConfirmClick"
			/>
			<input
				v-else-if="type === 'password'"
				v-model="innerValue"
				class="ui-textbox__control"
				type="password"
				:placeholder="placeholder"
				@blur="handleBlur"
				@confirm="handleConfirmClick"
			/>
      <input
          v-else-if="type === 'digit' || type === 'number'"
          v-model="innerValue"
          class="ui-textbox__control"
          :type="type"
          :placeholder="placeholder"
          @blur="handleBlur"
          @confirm="handleConfirmClick"
      />
		</view>
		<view class="ui-textbox__suffix" v-if="$slots.suffix">
			<slot name="suffix"></slot>
		</view>
	</label>
</template>

<script>
	export default {
		name:"common-textbox",
		props: {
			placeholder: {
				type: String
			},
      type: {
        type: String,
        default: 'text',
        validator (value) {
          return ['text', 'password', 'digit', 'number'].includes(value)
        }
      },
			display: {
				type: String,
				default: 'default',
				validator (value) {
					return ['background', 'default'].includes(value)
				}
			},
			value: {
				type: String
			}
		},
		data() {
			return {

			};
		},
		computed: {
			innerValue: {
				get () {
					return this.value
				},
				set (val) {
					this.$emit('input', val)
				}
			}
		},
		methods: {
			handleBlur () {
				this.$emit('change', {
					value: this.innerValue
				})
			},
			handleConfirmClick (event) {
				// andorid不会隐藏，需要调用接口隐藏一下
				uni.hideKeyboard()
				this.$emit('change', {
					value: this.innerValue
				})
			}
		}
	}
</script>

<style lang="scss">
.ui-textbox{
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 40px;
	/deep/ uni-input,
	/deep/ input{
		font-size: 14px;
		height: 40px;
	}
}
.ui-textbox__input{
	flex: 1;
}
.ui-textbox__prefix{
	padding-right: 9px;
}
.ui-textbox__suffix{
	padding-left: 9px;
}
.ui-textbox--background {
	.ui-textbox__control{
		background-color: #F2F4F9;
		border-radius: 6px;
		padding: 0 12px;
	}
}
</style>
